<template>
  <div>
    <mt-popup v-model="popupVisible" position="right" :modal="false" class="fxActivityRecord-filterItem">
      <div class="scroll-view">
        <customHeader middleTitle="筛选" @leftCallBack="back" />
        <div class="page-body" v-if="scrollShow">
          <div class="section has-right">
            <div class="title">状态</div>
            <ul class="check-list">
              <li
                class="item"
                :class="{checked:item.checked}"
                v-for="(item,index) in status"
                :key="index"
                @click="handleListCheck(item,'status')"
              >
                {{ item.label }}
                <i class="zhk-detail_select"></i>
              </li>
            </ul>
          </div>
        </div>
        <div class="btn-wrap">
          <div @click="reset">重置</div>
          <div @click="sure">确定</div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup, Toast } from "mint-ui";
import customHeader from "../../components/header/header";
Vue.component(Popup.name, Popup);
export default {
  name: "fxActivityFilterItem",
  data() {
    return {
      popupVisible: false,
      scrollShow: false,
      status: [
        // { label: "已结算", value: "0", checked: false },
        // { label: "未结算", value: "1", checked: false }
      ],

      filterBak: {
        status: "",
      }
    };
  },
  components: {
    customHeader,
  },
  computed: {
  },
  props: {
    statusList: Array
  },
  methods: {
    handleListCheck(item, dataItem) {
      this[dataItem].forEach(function (currentValue, index, arr) {
        if (item.value === currentValue.value) {
          currentValue.checked = !currentValue.checked;
        } else {
          currentValue.checked = false;
        }
      });
    },
    popupShow() {
      this.popupVisible = true;
    },
    //深拷贝
    deepCopy(v) {
      if (v) {
        return JSON.parse(JSON.stringify(v));
      } else {
        return v;
      }
    },
    filterSure() {
      this.popupVisible = false;
      const selectObj = this.status.filter(item => {
        return item.checked === true;
      });
      let value = [];
      for (const item of selectObj) {
        value.push(item.value);
      }
      this.$emit("filterChoice", value);

      //备份（如果筛选项改变后没有点击确定而点了返回，则用备份数据还原所选）
      this.$nextTick(() => {
        this.filterBak.status = this.deepCopy(this.status);
      });
    },

    //返回
    back() {
      //还原备份（如果筛选项改变后没有点击确定而点了返回，则用备份数据还原所选）
      try {
        if (this.filterBak.status) {
          this.status = this.deepCopy(this.filterBak.status);
        }
      } catch (error) {

      }
      this.popupVisible = false;
    },

    //重置
    reset() {
      this.status.forEach(v => {
        v.checked = false;
      });
    },
    //确定
    sure() {
      this.filterSure();
    }
  },
  watch: {
    popupVisible(val) {
      if (val) {
        setTimeout(() => {
          this.scrollShow = true;
        }, 100);
      }
    },
    statusList(v) {
      if (v && v.length > 0) {
        this.status = v;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "fxActivityRecord";
</style>
<style lang="scss" >
.date-timer-picker {
  .picker-slot {
    font-size: 0.76rem;
  }
}
.pickerZindex {
  .mask {
    background: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>
